<template>
  <div class="box search-box lgls">
    <div class="search-content">
      <div class="address">
        <img src="http://img.zhichiwangluo.com/zc_app_default_photo.png" alt="">
        <span>
         一人正在选购中
        </span>
      </div>
      <div class="cutline"></div>
      <div class="search-top">
        <ul>
          <li class="arror" @click="sBack">
            <span class="iconfont icon-jiantou1"></span>
          </li>
          <li class="s-msg">
            <p class="search" >
              <span class="iconfont icon-sousuo"></span>
              <input type="text" placeholder="请输入商品名称" v-model="sMsg">
            </p>
          </li>
          <li class="searching">
            搜索
          </li>
        </ul>
      </div>
      <div class="searchlist">
        <Searchlist :sMsg="sMsg"></Searchlist>
      </div>
    </div>
  </div>
</template>

<script>
import Searchlist from '@/components/Search.vue'
export default {
  data () {
    return {
      sMsg: ''
    }
  },
  components: {
    Searchlist
  },
  methods: {
    sBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.lgls {
  .search-content {
    .address {
      @include rect(100%,0.35rem);
      line-height: 0.35rem;
      padding: 0 15px 0;
      img {
      @include rect(0.27rem,0.27rem);
      }
      span {
        font-size: 10px;
        color: #666;
        margin-left: 8px;
      }
    }
    .cutline {
      @include rect(100%,0.1rem);
      background-color: #f3f3f3;
    }
    .search-top {
      ul {
        @include flexbox();
        border-bottom:1px solid #f3f3f3;
        li {
          @include rect(auto,0.37rem);
          text-align: center;
          line-height: 0.37rem;
          .search {
            border-radius: 20px;
            margin-top:0.05rem;
            @include rect(2.93rem,0.26rem);
            background-color: #f4f4f4;
            line-height: 0.26rem;
            font-size: 14px;
            input {
              @include rect(2.5rem,0.26rem);
              background-color: #f4f4f4;
              border: 0;
              color: #666;
              padding-left: 8px;
            }
          }
        }
        .arror {
          padding: 0 13px;
        }
        .searching {
          @include flex();
          text-align: center;
        }
      }
    }
    .searchlist {
      @include rect(100%, auto);
    }
  }
}
</style>
